<div *ngIf="bestTipBlock" class="list-wrapper h-100 w-100 fx-row-vert-cent overflow-y-auto">
  <div class="block-list h-100">
    <div class="p-relative w-100 flex-row align-center flex-wrap pt-12"
         [class.mt-16]="blocks.length === 1">
      <aside class="flex-column flex-between align-center">
        <div class="w-100 fx-row-vert-cent">
          <div class="arrow"></div>
          <span class="root ml-10">
          <span>Root</span>
        </span>
        </div>
        <div class="w-100 fx-row-vert-cent">
          <div class="arrow"></div>
          <span class="best-tip ml-10">
          <span>Best Tip</span>
        </span>
        </div>
      </aside>

      <div class="block bg-container root-block"
           [ngClass]="rootBlock?.status">{{ rootBlock?.height || '-' }}
      </div>
      <div *ngFor="let block of blocks; trackBy: trackBlocks"
           [ngClass]="block.status"
           class="block bg-container">{{ block.height || '-' }}
      </div>
      <div class="block bg-container best-tip-block"
           [ngClass]="bestTipBlock?.status">{{ bestTipBlock?.height || '-' }}
      </div>
    </div>
  </div>
</div>
